<template>
  <div class="el-chat">
    <div class="one" style="" v-if="type==='onetoone'">
      <div v-for="(message, index) in fromid_Memessage" :key="index">
        <div
          :class="['el-chat-message', { 'el-chat-message__self': message.type === 'my', 'el-chat-message__other': message.type === 'other' }]">
          <div v-if="message.type === 'other'" class="el-chat-message__avatar"><img
              :src="otheravatarfilter(message.from_userid)"></div>
          <div class="el-chat-message__content">
            {{ message.message }}
          </div>


          <div v-if="message.type === 'my'" class="el-chat-message__avatar"><img
              :src="myuserXx.avatar"></div>
        </div>
        <div
          :class="['el-chat-message__time', { 'el-chat-message__self': message.type === 'my', 'el-chat-message__other': message.type === 'other' }]">
          <p>{{ message.messagetime }}</p>
        </div>
      </div>
    </div>
    <div class="one" style="" v-if="type==='rooms'">
      <div v-for="(message, index) in roomsidMessage" :key="index">
        <div
          :class="['el-chat-message', { 'el-chat-message__self': message.type === 'my', 'el-chat-message__other': message.type === 'other' }]">
          <div v-if="message.type === 'other'" class="el-chat-message__avatar"><img
              :src="message.avatar"></div>
          <div class="el-chat-message__content">
            {{ message.message }}
          </div>


          <div v-if="message.type === 'my'" class="el-chat-message__avatar"><img
              :src="message.avatar"></div>
        </div>
        <div
          :class="['el-chat-message__time', { 'el-chat-message__self': message.type === 'my', 'el-chat-message__other': message.type === 'other' }]">
          <p>{{ message.messagetime }}</p>
        </div>
      </div>
    </div>

    <div class="but-text">
      <textarea v-model="newMessage" name="" id="" style="height: 80%;width:95%;font-size: 15px;margin-top: 10px;"
        placeholder="请输入"></textarea>
      <el-button type="primary" class="button" @click="sendMessage">发送</el-button>
    </div>




  </div>
</template>
<!-- [
    {
        "type": "other",
        "chatid": 2,
        "from_userid": 2,
        "to_userid": 1,
        "message": "11111",
        "messageLx": 1,
        "roomid": null,
        "messagetime": "2023-05-09T07:46:41.000Z"
    },
    {
        "type": "my",
        "chatid": 1,
        "from_userid": 1,
        "to_userid": 2,
        "message": "11111",
        "messageLx": 1,
        "roomid": null,
        "messagetime": "2023-05-09T07:46:28.000Z"
    }
] -->
<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import { formatDate } from '@/uilts/uilts'
export default {
  props: {
    fromid: {
      type: String, Number,
      default: ''
    },
    type:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      newMessage: ''
    }
  },
  created() {
    this.$socket.on('one_one_messagesendbank', (data) => {
      this.$message.warning(`${data.message}`)
    })
  },
  computed: {
    ...mapGetters(['one_oneusermessagefiltere', 'userXxget','roomIdMessages']),
    ...mapState({
      myuserXx: state => state.myuserXx
    }),
    fromid_Memessage() {
      if(this.type==='onetoone'){
        return this.one_oneusermessagefiltere(this.fromid)
      }else{
        return {}
      }   
    },
    roomsidMessage(){
      return this.roomIdMessages(this.fromid)
    },
    myuserid() {
      return sessionStorage.getItem('userid')
    }
  },
  methods: {
    ...mapMutations([
      'updatemessageonetoone',
      'updataRoomMessage'
    ]),
    otheravatarfilter(id) {
      const otherXx = this.userXxget(id)
      return otherXx.avatar
    },
    sendMessage() {
      console.log(111);
      console.log(this.type);
      if (this.newMessage) {
        const id = sessionStorage.getItem('socketId')
        if(this.type==='onetoone'){
          const parmas = {
          type: 'my',
          chatid: 'new',
          from_userid: this.myuserid,
          to_userid: this.fromid,
          message: this.newMessage,
          messageLx: 1,
          roomid: null,
          messagetime: formatDate(new Date())
        }
        this.newMessage = ''
        this.updatemessageonetoone({ type: this.fromid, parmas: parmas, socketId: id })
        this.$socket.emit('one_one_message', { type: this.fromid, parmas: parmas, socketId: id })
        }else if(this.type==='rooms'){
          const parmas = {
          type: 'my',
          chatid: 'new',
          from_userid: this.myuserid,
          to_userid: null,
          avatar:this.myuserXx.avatar,
          message: this.newMessage,
          messageLx: 1,
          roomid: this.fromid,
          messagetime: formatDate(new Date())
        }
        console.log(22);
        this.updataRoomMessage({ type: this.fromid, parmas: parmas, socketId: id })
        this.$socket.emit('rommsmessage', { type: this.fromid, parmas: parmas, socketId: id })
        this.newMessage = '' 
      }
        this.$nextTick(() => {
          const messageContainer = this.$el.querySelector('.one');
          messageContainer.scrollTop = messageContainer.scrollHeight;
        });
      }
    }
  }
}
</script>

<style>
.el-chat {
  width: 100%;
  height: 100%;
  /* border-bottom: 1px solid aqua; */
}

.el-chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

.one {
  height: 70%;
  overflow: auto;
  border-bottom: 1px solid aqua;
}

.one::-webkit-scrollbar {
  width: 0;
}

.el-chat-message__avatar {
  width: 50px;
  height: 50px;
  margin-left: 5px;
}

.el-chat-message__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-chat-message__content {
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 10px;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.el-chat-message__time {
  display: flex;
  align-items: flex-start;
  color: rgb(57, 172, 95);
  font-size: 6px;
}

.el-chat-message__self .el-chat-message__content {
  background-color: #409EFF;
  color: #fff;
}

.el-chat-message__other .el-chat-message__content {
  background-color: #f0f0f0;
  color: #333;
}

.el-chat-message__other {
  justify-content: flex-start;
}

.el-chat-message__self {
  justify-content: flex-end;
}

.el-chat-form {
  display: flex;
  margin-top: 10px;
}

.el-chat-form input[type="text"] {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-right: 10px;
}

.el-chat-form button[type="submit"] {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  cursor: pointer;
}

.but-text {
  height: 29%;
  width: 100%;
  /* border: 1px solid red; */
}

.button {
  float: right;
  padding: 5px 25px;
  /* background-color: #3bb4f2; */
  margin-right: 20px;
}</style>

